<template>
    <!-- 底部tabbar -->
    <div class="tabbar">
        <div class="tabbar_item" v-for="item in tabbarList" :key="item.text" :class="{'tabbar_item--active':item.to.path===$route.path}">
            <RouterLink :to="item.to.path">
                <span class="iconfont" v-html="item.icon"></span>
                <span class="tabbar_title">{{ item.text }}</span>
            </RouterLink>
        </div>
    </div>
</template>

<script setup>
// axios get tabbarList 
//数据
import { RouterLink } from 'vue-router'
const tabbarList = [
    {
        "icon": "&#xe651;",
        "text": "首页",
        "to": {
            "path": "/home"
        }
    },
    {
        "icon": "&#xe690;",
        "text": "购物车",
        "to": {
            "path": "/cart"
        }
    },
    {
        "icon": "'&#xe655;",
        "text": "订单",
        "to": {
            "path": "/order"
        }
    },
    {
        "icon": "&#xe60b;",
        "text": "我的",
        "to": {
            "path": "/my"
        }
    }
]
    console.log(tabbarList);
</script>

<style lang="scss" scoped>
@import '../style/viriables.scss';

.tabbar {
    width: 100%;
    height: .49rem;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: .01rem solid $content_bgColor;
    display: flex;

    &_item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: $content_fontcolor;

        }

        //活动样式
        &--active {
            a {
                color: #1FA4FC;
            }
        }
    }
}
</style>